<template>
  <div class="ann-detail">
    <header-bar title="通知详情"></header-bar>
    <content-scroll>
      <div class="scroll-content">
        <group class="group basic-info" label-width="5em">
        <div class="title-wrapper" slot="title">
          <div class="icon-wrapper">
            <icon name="document" :scale="2"></icon>
          </div>
          <h3 class="title">基本信息</h3>
        </div>
        <cell 
          v-for="(item, index) in infoCells" 
          :key="index"
          :title="item.title"
          :value="item.value" value-align="left">
        </cell>
      </group>

      <!-- 附件 -->
      <group class="group document">
        <div class="title-wrapper" slot="title">
          <div class="icon-wrapper">
            <icon name="document" :scale="2"></icon>
          </div>
          <h3 class="title">附件</h3>
        </div>
        <div class="file-item">
          <div class="icon-wrapper">
            <icon name="doc" :scale="3"></icon>
          </div>
          <h4 class="file-name">2017年信息部12月份工资表.doc</h4>
        </div>
        <div class="file-item">
          <div class="icon-wrapper">
            <icon name="pdf" :scale="3"></icon>
          </div>
          <h4 class="file-name">2017年信息部12月份工资表2017年信息部12月份工资表.pdf</h4>
        </div>
      </group>

      </div>
      
    </content-scroll>
  </div>
</template>

<script>
  import HeaderBar from '@/components/HeaderBar'
  import ContentScroll from '@/components/ContentScroll'
  import {Group, Cell} from 'vux'

  export default {
    components: {
      HeaderBar,
      ContentScroll,
      Group,
      Cell
    },
    data(){
      return {
        infoCells: [
          {
            title: '标题',
            value: '2017年信息部12月份工资表'
          },
          {
            title: '发布人',
            value: '赵华科'
          },
          {
            title: '时间',
            value: '2017-12-15'
          },
          {
            title: '任务编码',
            value: 'AMUV-2017110047'
          },
          {
          	title:'文件类型',
          	value:'内部通知'
          }
        ]
      }
    },
    methods: {

    }
  }
</script>

<style lang="less" scoped>
  @import '~@/styles/mixin.less';
  @import '~@/styles/variables.less';

  .scroll-content{
    padding-bottom: 20px;
  }
  .ann-detail{
    background-color: @color-background-main;
  }
  .group{
    margin-top: 16px;
    .title-wrapper{
      display: flex;
      align-items: center;
      height: 40px;
      background-color: #fff;
      .icon-wrapper{
        display: flex;
        align-items: center;
      }
      .title{
        .group-title();
        font-weight: 600;
      }
    }
  }
  .document {
    .file-item{
      display: flex;
      align-items: center;
      margin: 12px 16px;
      padding: 12px 16px;
      border: 1px solid #ccc;
      .icon-wrapper{
        margin-right: 8px;
      }
    }
  }
</style>